<!doctype html>
<html>
<head>
	<meta charset="utf-8"><meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>艺考圈</title>
	<link rel="stylesheet" type="text/css" href="../../lib/css/skin.css"/>
</head>
<body>
<div id="root">
	<div class="app_warp">
		<div class="app_head">
			<span class="left back" tapmode onclick="api.closeWin()"></span>
			<span class="name">登录</span>
		</div>
		<div class="app_main login_bg">
			<div class="steps step_0" style="display: none;">
				<div class="login_form animated fadeInUp">
			         <span class="phone">
				        <input type="number" id="phone" maxlength="11" placeholder="请输入手机号" value="13241033355">
			        </span>
					<span class="code">
				        <input type="number" id="code" maxlength="4" placeholder="请输入验证码">
				        <a id="get_code" href="javascript:;" tapmode onclick="send_ajax('code')"
				           class="get_code active">请求验证码</a>
			        </span>
					<a href="javascript:;" class="submit skin_btn active" tapmode onclick="send_ajax('login')">
						登录
					</a>
					<p class="login_intro">
						收不到验证码，请联系QQ:770723847
					</p>
				</div>
			</div>
			<div class="steps step_1" style="display: none;padding-top: 15rem">
				<div class="nocontent por animated fadeInDown">
					<img src="../../lib/img/ok-128.png" class="animated fadeInUp trumpet" alt="">
					<div class="text">
						您已登录
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>

	var time = null,
		_phone, _code, _codeBtn, _phoneOK, _codeOK,
		interVal = function () {
			if (time > 0) {
				time--;
				_codeBtn.text('重发(' + time + ')秒').removeClass('active');
				setTimeout(function () {
					interVal();
				}, 1000);
			} else {
				time = null;
				_codeBtn.text('重发验证码').addClass('active');
			}
		},
		getStep = function (step, status) {
			$('.steps').fadeOut();
			_$.sleep(function () {
				$('.step_' + step).show();
			}, 500);
			if(status){
				_$.sleep(function () {
					api.closeWin();
				}, 2000);
			}
		},
		send_ajax = function (act) {
			if (act === 'code') {
				_phoneOK = _$.dataTest('mobile', _phone.val());
				_codeOK = _$.dataTest('code', _code.val());
				if (_phoneOK && time === null) {
					_$.ajax({
						interface: 'getPhoneCode',
						data: {
							phone: _phone.val()
						},
						call: function (data) {
							if (data.status === 200) {
								if (data.data.code !== null) {
									_code.val(data.data.code);
								}
								api.toast({
									msg: data.msg
								})
								time = data.data.time || 60;
								interVal();
							} else {
								api.toast({
									msg: data.msg
								})
							}
						}
					})
				} else if (time !== null) {
					api.toast({
						msg: '请耐心等待' + time + '秒'
					})
				} else {
					api.toast({
						msg: '请输入正确的电话号码'
					})
				}
			} else if (act === 'login') {
				_phoneOK = _$.dataTest('mobile', _phone.val());
				_codeOK = _$.dataTest('code', _code.val());
				if (_phoneOK && _codeOK) {
					_$.ajax({
						interface: 'sendPhoneNumber',
						data: {
							phone: _phone.val(),
							code: _code.val()
						},
						call: function (data) {
							if (data.status === 200) {
								_$.db.get({
									call: function (db) {
										console.log(JSON.stringify(data))
										_$.db.ext({
											val: data.data,
											call: function () {
												_$.db.ext({
													key: 'appStatus',
													val: {
														loginStatusChange:true
													},
													call: function () {
														getStep(1, true);
													}
												});
											}
										})
									}
								})
							} else {
								api.toast({
									msg: data.msg
								})
							}
						}
					})
				} else {
					api.toast({
						msg: '请检查手机号及验证码是否正确'
					})
				}
			}
		},
		appready = function () {
			_phone = $('#phone');
			_code = $('#code');
			_codeBtn = $('#get_code');
			_$.db.get({
				call: function (db) {
					if (db.token !== null) {
						getStep(1, db);
					} else {
						getStep(0);
					}
				}
			})
		};
</script>
<script src="../../lib/js/config.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/common.js"></script>
</body>
</html>